<template>
  <div style="padding:20px;height: 95%;">
    <el-card>
      <h1>用户列表</h1>
      <el-table :data="User"
                border
                max-height="700px"
                stripe>
        <el-table-column prop="uid"
                         label="用户ID" />
        <el-table-column prop="nickname"
                         label="用户昵称" />
        <el-table-column prop="password"
                         label="用户密码" />
        <el-table-column prop="email"
                         label="用户邮箱" />
        <el-table-column label="是否封禁"
                         width="90">
          <template slot-scope="scope">
            <el-switch @change="changeSwitch(scope.row)"
                       v-model="scope.row.status">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="90">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="small"
                       @click="remove(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      User: []
    }
  },
  methods: {
    async remove (id) {
      this.$confirm('是否确定删除用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`rest/User/${id}`).then(res => {
          if (res.status !== 200) {
            return this.$message.error('删除用户失败！')
          }
          this.$message.success('删除用户成功！')
          this.User = this.User.filter(item => item._id !== id)
        })
      })
    },
    async changeSwitch (row) {
      // const res = await this.$http.put(`rest/User/${row._id}/status/${row.status}`)

      const res = await this.$http.put(`rest/User/${row._id}/status/${row.status}`)
      if (res.status !== 200) {
        row.status = !row.status
        return this.$message.error('状态变更失败')
      }
      this.$message.success('状态变更成功')
    },
    async fetch () {
      const res = await this.$http.get('rest/User')
      this.User = res.data
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style scoped>
.el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
